<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>新增接口</title>
    <link rel="stylesheet" type="text/css" media="all" href="/layui/css/layui.css"/>
    <script type="text/javascript" src="/layui/layui.all.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!--<script type="text/javascript" src="/js/myJs.js"></script>-->

</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>新增接口</legend>
</fieldset>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-xs6">
            <form id="APIForm" class="layui-form layui-form-pane"><br/><br/><br/>
                <div class="layui-form-item">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-inline" style="width: 300px">
                        <input  style="height: 38px" type="text" name="sceneID" th:value="${sceneID}" readonly="readonly" autocomplete="off" class="layui-input layui-badge" />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">url</label>
                    <div class="layui-input-inline" style="width: 300px;">
                        <datalist id="apiSelect">

                        </datalist>
                        <input type="text" list="apiSelect" placeholder="" name="url" autocomplete="off" class="layui-input"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label ">登录人</label>
                    <div class="layui-input-inline" style="width: 300px;">
                        <input type="text" name="loginName" placeholder="登录接口不用填" autocomplete="off" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label ">执行顺序</label>
                    <div class="layui-input-inline" style="width: 300px;">
                        <input type="text" name="runOrder" autocomplete="off" value="0" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label" style="width: 410px">请求参数</label>
                        <div class="layui-input-block">
                            <textarea placeholder="body..." name="body" style="height: 150px;width: 410px;" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label" style="width: 410px">断言</label>
                    <div class="layui-input-block">
                        <textarea placeholder="断言..." name="shouldbe" style="height: 150px;width: 410px;" class="layui-textarea"></textarea>
                    </div>
                </div>
                <br/>
                <!--提交按钮-->
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="reset" class="layui-btn" lay-filter="add" id="add" lay-submit="">提交</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>


</body>
<script>
    $.get(
        "/api/scene/apiSelect", {

        }, function (data) {
            var objectD = JSON.parse(data);
            $.each (objectD.rows, function (key, value) {
                var result = '<option value="' + value.url + '">' + value.url + '</option>';
                $('#apiSelect').append(result);
            })
            layui.use('form', function(){
                var form = layui.form;
                form.render();
            });
        }
    )
    function serializeObject(form){
        var o ={};
        $.each(form.serializeArray(),function(index){
            if(o[this['name']]){
                o[this['name']] = o[this['name']] +","+this['value'];

            }else{
                o[this['name']] = this['value'];
            }
        });
        return o;
    }
    layui.use('form', function () {
        var form = layui.form;
        form.render();
        //监听提交
        form.on('submit(add)', function (data) {

            var from = $("#APIForm");
            var model = serializeObject(from);

            $.ajax({
                type: "post",
                url: "/api/scene/addAPI",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(model),
                dataType: "json",
                success: function (data) {
                    if (data == "true") {
                        layer.confirm('新建成功', function (index) {
                            window.close();
                        });
                    }
                    if (data =="false") {
                        layer.alert("新建失败")
                    }
                    if(data =="接口库中无此接口"){
                        layer.alert("接口库中无此接口");
                    }
                }
            })
            return false;
        });
    });

</script>
</html>